<template>
  <div class="component">
    <div class="top">
         <span style="font-weight: bold;color: #CACACA;font-size: 14px">当前位置: </span>&nbsp;
          <router-link to="/rental" style="text-decoration-line: none;color:#7B7B7B;font-size: 14px">租车服务</router-link> >
          <span>{{carDetail.heading}}</span>
    </div>
    <div class="center-div">
      <h2>{{carDetail.heading}}</h2>
      <div class="center-div-main">
          <div class="center-div-main-left">
            <el-image
                style="width: 700px; height: 300px"
                :src="baseUrl+carDetail.headImg"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :initial-index="4"
                fit="cover"
            />
          </div>
          <div class="center-div-main-right">
            <div class="message-font message-div-style">车型描述</div>
            <div style="font-size:15px;color:darkgrey;margin-top: 10px;height: 150px">{{carDetail.blurb}}</div>
            <div class="message-font message-div-style">租赁信息</div>
            <div style="font-size:15px;color:darkgrey;margin-top: 10px;height: 150px">
              该车型库存总数:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.sizes?carDetail.sizes:0}}
              <br/>
              已租出车辆数:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.useSizes?carDetail.useSizes:0}}
              <br/>
              可租赁车辆数:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.sizes-carDetail.useSizes}}
            </div>

          </div>
      </div>
    </div>
    <div style="width:1400px;height:400px;margin-top: 25px ">
      <div class="goods-div-message">
        <div class="message-font message-div-style">{{carDetail.heading}}租车基本信息</div>
        <div class="div-paramMsg-style" style="font-size:15px;color:darkgrey">品牌:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.brandName}}</div>
        <div class="div-paramMsg-style" style="font-size:15px;color:darkgrey">车系:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.name}}</div>
        <div class="div-paramMsg-style" style="font-size:15px;color:darkgrey">年款:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.modelYear}}</div>
        <div class="div-paramMsg-style" style="font-size:15px;color:darkgrey">型号:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.modelNum}}</div>

        <div class="message-font message-div-style" style="margin-top: 50px">{{carDetail.heading}}租车配置信息</div>
        <div class="div-paramMsg-style" style="font-size:15px;color:darkgrey">类别:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.category}}</div>
        <div class="div-paramMsg-style" style="font-size:15px;color:darkgrey">排量:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.displacement}}</div>
        <div class="div-paramMsg-style" style="font-size:15px;color:darkgrey">厢数:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.compartments}}</div>
        <div class="div-paramMsg-style" style="font-size:15px;color:darkgrey">座位数:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.seats}}</div>
        <div class="div-paramMsg-style" style="font-size:15px;color:darkgrey">燃料类型:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.fuel}}</div>
        <div class="div-paramMsg-style" style="font-size:15px;color:darkgrey">燃料标号:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.fuelNum}}</div>
        <div class="div-paramMsg-style" style="font-size:15px;color:darkgrey">邮箱容积:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.mailbox}}</div>
        <div class="div-paramMsg-style" style="font-size:15px;color:darkgrey">养护里程:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{carDetail.mileage}}</div>
      </div>

      <div class="goods-div-rental">
        <el-button type="warning" @click="toRentalCar(carDetail.vehId)">在线租赁</el-button>
        <div class="message-font message-div-style" style="margin-top: 25px">租车流程</div>
        <div style="margin-top: 40px" >
              <div style="float: left">
                <img src="../../assets/car_rental_process.png"  />
              </div>
               <div style="float: left;margin-left: 25px">
                 <div class="goods-div-rental-item">
                    在线租赁提交租赁订单,支付订单
                 </div>
                 <div class="goods-div-rental-item">
                     前往门店办理取车手续
                 </div>
                 <div class="goods-div-rental-item">
                    验车交车开始租车之旅
                 </div>

               </div>

        </div>
      </div>

    </div>

    <div class="rate-div-message">
      <div class="message-div-style" style="font-size: 17px">用户租车评价</div>

      <div class="rate-item-message" v-for="item in rateTable" :key="item.id">
          <div class="rate-item-message-left">
            <div style="margin-top: 30px;float: left">
              <img style="width: 35px;height: 35px;" src="../../assets/rate.png">
            </div>
            <div style="font-size: 14px;float: left;margin-top: 42px;margin-left: 12px">
              {{item.phone}}
            </div>


          </div>
          <div class="rate-item-message-center">
            <div style="padding-top: 13px">
              <el-rate
                  v-model="item.score"
                  disabled
                  text-color="#ff9900"
              />
              <span style="display: inline-block;margin-left: 300px;font-size: 15px;color: darkgrey">{{ new Date(item.rateTime).toLocaleString()}}</span>
            </div>
            <div style="height: 50px;color: darkgrey;word-wrap: break-word;">
              {{item.content}}
            </div>


          </div>

      </div>
      <div style="margin-top: 15px;width: 500px" v-if="rateTable.length>0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="float: right;margin-right: 30px"
            background
            :page-sizes="[5, 10, 20, 30]"
            v-model:total="pageParam.total"
            layout="prev, pager, next"
            class="mt-4"
            v-model:current-page="pageParam.current"
            v-model:page-size="pageParam.size"
        />
      </div>
      <div style="margin-top: 15px;font-size: 20px;color: darkgrey;margin-left: 350px;height: 200px;line-height: 200px"    v-if="rateTable.length==0">
           暂无评价
      </div>

    </div>


  </div>

</template>
<script setup>


import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import axios from "@/axios.js"
import store from '@/store/index.js'
import {router} from "@/router/index.js";
import {ElMessage} from "element-plus"

const baseUrl = '../../public/img/'

const route = useRoute()

onMounted(()=>{
  id.value = route.params.type
  findCarDetail(id.value)
  selectRatePage(id.value)
})

const id = ref(0)
const carDetail = ref({})

const findCarDetail = (id)=>{
    axios.get(`/goods/home/findCarDetail?id=${id}`).then(res=>{
        carDetail.value = res.data
    })
}
const toRentalCar = (vehId)=>{
    const token =localStorage.getItem('token')
    if (token){
      router.push(`/toAddRental/${vehId}/${carDetail.value.heading}/${carDetail.value.id}`)
    }else {
      ElMessage.error("未登录，请先登录")
      router.push("/login")
    }
}


const rateTable = ref([{}])
const selectRatePage = (id)=>{
    axios.get(`/rate/selectPage/${id}`,{
      params: {
        current: pageParam.value.current,
        size: pageParam.value.size
      }
    }).then(res=>{
        rateTable.value = res.data.records
        pageParam.value.current = res.data.current
        pageParam.value.total= res.data.total
        pageParam.value.size = res.data.size
    })
}


const pageParam = ref({
  current:1,
  total:10,
  size:10
})

const handleSizeChange = (val)=>{
  console.log(`每页 ${val} 条`)
  pageParam.value.size = val
  selectRatePage(id.value)

}
const handleCurrentChange = (val)=>{
  console.log(`当前页: ${val}`)
  pageParam.value.current = val
  selectRatePage(id.value)

}





</script>

<style scoped>

.component{
  width: 1450px;
  background-color: #F9F9F9;
}

.top{
  padding-left: 120px;
  padding-top: 20px;
}

.center-div{
  margin-left: 120px;
  margin-top: 20px;
  width: 1200px;
  height: 450px;
  background-color: #ffffff;
  padding-left: 30px;
  padding-top: 20px;
}

.center-div-main-left{
  float: left;
  margin-top: 25px;
  width: 700px;
  height: 350px;
  border: 1px solid #cccccc ;
}
.center-div-main-right{
  width: 400px;
  height: 350px;
  padding-top: 20px;
  padding-left: 20px;
  float: left;


}

.goods-div-message{
  float: left;
  margin-left: 120px;
  width: 700px;
  height: 400px;
  background-color: white;
  padding-top: 20px;
  padding-left: 20px;
}

.message-font{
  font-size: 16px;
}
.message-div-style{
  border-bottom: 1px solid #cccccc;
  height: 30px;
}

.div-paramMsg-style{
  margin-top: 20px;
  width: 350px;
  display: inline-block;

}
.goods-div-rental{
  float: left;
  margin-left: 50px;
  width: 400px;
  height: 400px;
  background-color: white;
  padding-top: 20px;
  padding-left: 20px;

}

.goods-div-rental-item{
  color: darkgrey;
  width: 150px;
  margin-left: 10px;
  margin-bottom: 25px;
}


.rate-div-message{
  margin-left: 120px;
  margin-top: 60px;
  width: 800px;
  background-color: white;
  padding-left: 20px;
  padding-top: 20px;
}

.rate-item-message{
  width: 780px;
  height: 100px;
  border-bottom: 1px solid #cccccc;
}
.rate-item-message-left{
  float: left;
  width: 200px;

}
.rate-item-message-center{
  float: left;
  width: 580px;
}




</style>